<template>
   <div>
      <div class="home-die">
     <div class="home-nav" style="background:url('/static/images/home/背景.png') no-repeat; background-size: 100%;background-position: center center;">
        <ul>
          <li>
            <img src="http://q04fjj6fi.bkt.clouddn.com/logo.png" alt="">
          </li>
          <li>
            <div>
                <a href=""><img src="http://q04fjj6fi.bkt.clouddn.com/%E7%99%BB%E5%BD%95.png" alt=""></a>
            </div>
            <a href="">
              <div style="background:url('http://q04fjj6fi.bkt.clouddn.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%201.png') no-repeat; background-size:156rpx 75rpx; background-position:center center;">
                <span>免费注册</span>
            </div>
            </a>
          </li>
        </ul>
        <div>
          <div>
            招生库平台，让家长放心的招生平台
          </div>
        </div>
        <ul>
          <li style="background:url('http://q04fjj6fi.bkt.clouddn.com/zjyjg.png') no-repeat; background-size:176rpx 67rpx; background-position:center center;">
            教育机构
          </li>
          <li style="background:url('http://q04fjj6fi.bkt.clouddn.com/%E5%A4%9A%E8%BE%B9%E5%BD%A2%201%20%E6%8B%B7%E8%B4%9D.png') no-repeat; background-size:163rpx 41rpx; background-position:center center;">
            招生工作者
          </li>
        </ul>
        <div style="background:  rgba(255,255,255,0.4)  url('http://q04fjj6fi.bkt.clouddn.com/ss.png') no-repeat; background-size:30rpx 30rpx; background-position:28rpx 22rpx;">
           <input type="text" placeholder="请输入教育机构名称" placeholder-class="placeholder">
        </div>
     </div>
     <div class="home-hope">
        <div>愿景和目标</div>
        <div>
          <scroll-view scroll-x="true" style="white-space: nowrap;" class="scroll">
            <div style="background:url('http://q04fjj6fi.bkt.clouddn.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%203%20%E6%8B%B7%E8%B4%9D%203.png') no-repeat; background-size:100% 100%; background-position:center center" class="home-hope-divone">
               <div class="home-hope-divotwo">
                 成为一家团队协作、产品驱动、用户为主的创造性企业
               </div>
            </div>
            <div style="background:url('http://q04fjj6fi.bkt.clouddn.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%203%20%E6%8B%B7%E8%B4%9D%204.png') no-repeat; background-size:100% 100%; background-position:center center;" class="home-hope-divone">
              <div class="home-hope-divotwo">
                让每一位招生工作者拥 有一个属于自己的招生网站
              </div>
            </div>
            <div style="background:url('http://q04fjj6fi.bkt.clouddn.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%203%20%E6%8B%B7%E8%B4%9D.png') no-repeat; background-size:100% 100%; background-position:center center;" class="home-hope-divone">
               <div class="home-hope-divotwo home-hope-divotwos">
                 让每一家教育机构拥 有专业的招生合作伙伴
               </div>
            </div>
          </scroll-view>
        </div>
     </div>
     <div class="swiper-container home-ruzhu" @touchstart="touchStart"  @touchend="touchEnd">
        <div>老师或机构入驻</div>
        <scroll-view scroll-x="true" style="white-space: nowrap;" class="swiper-wrapper">
             <div class="swiper-wrapper-div">
              <div class="swiper-slide" v-show="homeRuzhuLunboDateStr==1">

                     <div ref="thr" :class="homeRuzhuLunboDate==-1?'home-ruzhu-die homeRuzhuLunboClass':'home-ruzhu-die'" @touchstart="touchStart"  @touchend="touchEnd"  @click="homeRuzhuLunbo(2)"  style="background: url('/static/images/home/中.png') no-repeat; background-size:110% 110%; background-position:center center;" >
                       <div>
                        教育机构
                      </div>
                        <div>
                          <div>
                           <img src="http://q04fjj6fi.bkt.clouddn.com/pxjg.png" alt="">
                           <div>个人招生老师</div>
                          </div>
                          <div>
                              <img src="http://q04fjj6fi.bkt.clouddn.com/zkyx.png" alt="">
                              <div>专业招生企业</div>
                          </div>
                      </div>
                      <div>
                          登录/注册
                      </div>
                        <div v-if="homeRuzhuLunboDate!=-1">

                        </div>
            </div>
            </div>
                    <div class="swiper-slide" v-show="homeRuzhuLunboDateStr==1">

                          <div :class="homeRuzhuLunboDate==0?'home-ruzhu-die homeRuzhuLunboClass':'home-ruzhu-die'"  @touchstart="touchStart"  @touchend="touchEnd"  style="background:url('/static/images/home/中.png') no-repeat; background-size:110% 110%; background-position:center center;" >
                      <div>教育机构</div>
                      <div>
                      <div>
                        <img src="http://q04fjj6fi.bkt.clouddn.com/pxjg.png" alt="">
                        <div>培训机构</div>
                      </div>
                      <div>
                        <img src="http://q04fjj6fi.bkt.clouddn.com/zkyx.png" alt="">
                        <div>专科院校</div>
                      </div>
                      <div>
                        <img src="http://q04fjj6fi.bkt.clouddn.com/xqpxb.png" alt="">
                        <div>兴趣培训班</div>
                      </div>
                      <div>
                        <img src="http://q04fjj6fi.bkt.clouddn.com/gdyx.png" alt="">
                        <div>高等院校</div>
                      </div>
                  </div>
                  <div>
                      个体/企业入驻
                  </div>
                  <div v-if="homeRuzhuLunboDate!=0">

                  </div>
            </div>
            </div>
            <div class="swiper-slide">

                <div ref="two" :class="homeRuzhuLunboDate==1?'home-ruzhu-die homeRuzhuLunboClass':'home-ruzhu-die'"  @touchstart="touchStart"  @touchend="touchEnd"  style="background:url('/static/images/home/中.png') no-repeat; background-size:110% 110%; background-position:center center;" >
                                <div>
                                  培训机构
                                </div>
                  <div>
                  <div>
                     <img src="http://q04fjj6fi.bkt.clouddn.com/xqpxb.png" alt="">
                     <div>兴趣培训班</div>

                  </div>
                  <div>
                     <img src="http://q04fjj6fi.bkt.clouddn.com/xqpxb.png" alt="">
                     <div>兴趣培训班</div>
                  </div>
                  <div>
                     <img src="http://q04fjj6fi.bkt.clouddn.com/gdyx.png" alt="">
                     <div>高等院校</div>
                  </div>
               </div>
               <div>
                  登录/注册
               </div>
                <div v-if="homeRuzhuLunboDate!=1">

                  </div>
            </div>
            </div>
            <div class="swiper-slide" v-show="homeRuzhuLunboDateStr==2">

                     <div ref="thr" :class="homeRuzhuLunboDate==2?'home-ruzhu-die homeRuzhuLunboClass':'home-ruzhu-die'" @touchstart="touchStart"  @touchend="touchEnd"  @click="homeRuzhuLunbo(2)"  style="background: url('/static/images/home/中.png') no-repeat; background-size:110% 110%; background-position:center center;" >
                        <div>
                          招生工作者
                        </div>
                        <div>
                          <div>
                           <img src="http://q04fjj6fi.bkt.clouddn.com/pxjg.png" alt="">
                           <div>个人招生老师</div>
                          </div>
                          <div>
                              <img src="http://q04fjj6fi.bkt.clouddn.com/zkyx.png" alt="">
                              <div>专业招生企业</div>
                          </div>
                      </div>
                      <div>
                          登录/注册
                      </div>
                        <div v-if="homeRuzhuLunboDate!=2">

                        </div>
            </div>
            </div>
                  <div class="swiper-slide" v-show="homeRuzhuLunboDateStr==2">

                  <div :class="homeRuzhuLunboDate==3?'home-ruzhu-die homeRuzhuLunboClass':'home-ruzhu-die'"  @touchstart="touchStart"  @touchend="touchEnd"  style="background:url('/static/images/home/中.png') no-repeat; background-size:110% 110%; background-position:center center;" >
                    <div>
                      招生工作者
                    </div>
                      <div>
                      <div>
                        <img src="http://q04fjj6fi.bkt.clouddn.com/pxjg.png" alt="">
                        <div>培训机构</div>
                      </div>
                      <div>
                        <img src="http://q04fjj6fi.bkt.clouddn.com/zkyx.png" alt="">
                        <div>专科院校</div>
                      </div>
                      <div>
                        <img src="http://q04fjj6fi.bkt.clouddn.com/xqpxb.png" alt="">
                        <div>兴趣培训班</div>
                      </div>
                      <div>
                        <img src="http://q04fjj6fi.bkt.clouddn.com/gdyx.png" alt="">
                        <div>高等院校</div>
                      </div>
                  </div>
                  <div>
                      个体/企业入驻
                  </div>
                  <div v-if="homeRuzhuLunboDate!=3">

                  </div>
            </div>
            </div>
             </div>
        </scroll-view>
    </div>
    <div class="home-zuixin">
        <div>最新动态</div>
        <div class="home-zuixin-con">
             <div>
                 <ul>
                     <li><img src="/static/images/home/背景.png" alt="">
                         <div>李老师</div>
                     </li>

                     <li><img src="/static/images/home/+.png" alt=""></li>
                 </ul>
                 <div>
                    项目内容项目内容项目内容项目内容项目内容 项目内容项目内容项目内容
                 </div>
                 <ul>
                    <li>2019-03-21</li>
                    <li>
                       <img src="/static/images/home/背景.png" alt=""><span>0</span>
                    </li>
                    <li>
                       <img src="/static/images/home/背景.png" alt=""><span>0</span>
                    </li>
                 </ul>
             </div>
        </div>
         <div class="home-zuixin-con">
             <div>
                 <ul>
                     <li><img src="/static/images/home/背景.png" alt="">
                         <div>李老师</div>
                     </li>

                     <li><img src="/static/images/home/+.png" alt=""></li>
                 </ul>
                 <div>
                    项目内容项目内容项目内容项目内容项目内容 项目内容项目内容项目内容
                 </div>
                 <ul>
                    <li>2019-03-21</li>
                    <li>
                       <img src="/static/images/home/背景.png" alt=""><span>0</span>
                    </li>
                    <li>
                       <img src="/static/images/home/背景.png" alt=""><span>0</span>
                    </li>
                 </ul>
             </div>
        </div>
         <div class="home-zuixin-con">
             <div>
                 <ul>
                     <li><img src="/static/images/home/背景.png" alt="">
                         <div>李老师</div>
                     </li>

                     <li><img src="/static/images/home/+.png" alt=""></li>
                 </ul>
                 <div>
                    <div>项目内容项目内容项目内容项目内容项目内容 项目内容项目内容项目内容
                    </div>
                    <div>
                       <img src="/static/images/home/背景.png" alt="">
                       <img src="/static/images/home/背景.png" alt="">
                       <img src="/static/images/home/背景.png" alt="">
                       <img src="/static/images/home/背景.png" alt="">
                    </div>
                 </div>
                 <ul>
                    <li>2019-03-21</li>
                    <li>
                       <img src="/static/images/home/背景.png" alt=""><span>0</span>
                    </li>
                    <li>
                       <img src="/static/images/home/背景.png" alt=""><span>0</span>
                    </li>
                 </ul>
                 <div>
                   <div class="home-zuixin-contwo">
                    <ul>
                        <li><img src="/static/images/home/背景.png" alt="">
                            <div>李老师</div>
                        </li>
                        <li>
                           <i></i>
                           <span>山西 · 太原</span>
                        </li>
                    </ul>
                    <div>
                        <div>项目内容项目内容项目内容项目内容项目内容 项目内容项目内容项目内容
                        </div>
                    </div>
                    <ul>
                        <li>2019-03-21</li>
                        <li>
                          <img src="/static/images/home/背景.png" alt=""><span>0</span>
                        </li>
                    </ul>
                </div>
                <div class="home-zuixin-contwo">
                    <ul>
                        <li><img src="/static/images/home/背景.png" alt="">
                            <div>李老师</div>
                        </li>
                        <li>
                           <i></i>
                           <span>山西 · 太原</span>
                        </li>
                    </ul>
                    <div>
                        <div>项目内容项目内容项目内容项目内容项目内容 项目内容项目内容项目内容
                        </div>
                    </div>
                    <ul>
                        <li>2019-03-21</li>
                        <li>
                          <img src="/static/images/home/背景.png" alt=""><span>0</span>
                        </li>
                    </ul>
                </div>
                <div class="home-zuixin-contwo">
                    <ul>
                        <li><img src="/static/images/home/背景.png" alt="">
                            <div>李老师</div>
                        </li>
                        <li>
                           <i></i>
                           <span>山西 · 太原</span>
                        </li>
                    </ul>
                    <div>
                        <div>项目内容项目内容项目内容项目内容项目内容 项目内容项目内容项目内容
                        </div>
                    </div>
                    <ul>
                        <li>2019-03-21</li>
                        <li>
                          <img src="/static/images/home/背景.png" alt=""><span>0</span>
                        </li>
                    </ul>
                </div>
                <div class="home-zuixin-contwo">
                    <ul>
                        <li><img src="/static/images/home/背景.png" alt="">
                            <div>李老师</div>
                        </li>
                        <li>
                           <i></i>
                           <span>山西 · 太原</span>
                        </li>
                    </ul>
                    <div>
                        <div>项目内容项目内容项目内容项目内容项目内容 项目内容项目内容项目内容
                        </div>
                    </div>
                    <ul>
                        <li>2019-03-21</li>
                        <li>
                          <img src="/static/images/home/背景.png" alt=""><span>0</span>
                        </li>
                    </ul>
                </div>
                 </div>
             </div>

        </div>

    </div>
     <div class="home-fabu">
            <ul>
              <li style="background:url('http://q04fjj6fi.bkt.clouddn.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%205.png') no-repeat;background-size:  281rpx 88rpx; background-position:center center;">发布招生项目</li>
              <li style="background:url('http://q04fjj6fi.bkt.clouddn.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%205.png') no-repeat; background-size:  281rpx 88rpx;background-position:center center;">发布招生需求</li>
            </ul>
        </div>
  </div>
   </div>
</template>

<script>
import Swiper from "swiper"
export default {
   data(){
      return {
          homeRuzhuLunboDate:1,
          homeRuzhuLunboDateStr:1
      }
   },
       methods: {
            // 触摸开始事件
            touchStart: function(e) {
              var that = this;
              that.touchDot = e.mp.changedTouches[0].pageX; // 获取触摸时的原点
              // 使用js计时器记录时间
              that.interval = setInterval(function() {
                that.time++;
              }, 100);
              that.flag_hd = true;
               this.homeRuzhuLunboDateStr=2
            },
            // 触摸结束事件
            touchEnd: function(e) {
              var that = this;
              var touchMove = e.mp.changedTouches[0].pageX;
              // 向左滑动
              if (
                touchMove - that.touchDot <= -40 &&
                that.time < 10 &&
                that.flag_hd == true
              ) {
                that.flag_hd = false;
                //执行切换页面的方法
                if(this.homeRuzhuLunboDate==4){
                  this.homeRuzhuLunboDate=4;
                }else{
                  this.homeRuzhuLunboDate=this.homeRuzhuLunboDate+1
                }


              }
              //向右滑动
              if (
                touchMove - that.touchDot >= 40 &&
                that.time < 10 &&
                that.flag_hd == true
              ) {
                that.flag_hd = false;
                //执行切换页面的方法

                if(this.homeRuzhuLunboDate==-1){
                  this.homeRuzhuLunboDate=-1;

                }else{
                  this.homeRuzhuLunboDate=this.homeRuzhuLunboDate-1
                }
                this.homeRuzhuLunboDateStr=1
              }
              clearInterval(that.interval); // 清除setInterval
              that.time = 0;
      },
   },
  mounted(){
    wx.setNavigationBarTitle({
        title: '首页'
      })
  }
}

</script>

<style>
/* 发布模块 */
   .home-fabu>ul{
     display: flex;
     font-size:22rpx;
      font-weight:400;
      color:rgba(34,151,212,1);
      line-height:30px;
      width: 590rpx;
      margin: 0 auto;
      height: 200rpx;
      margin-top: 125rpx;
   }
   .home-fabu>ul>li{
     width: 281rpx;
     height: 88rpx;
     text-align: center;
     line-height: 88rpx;
     margin-right: 30rpx;
   }
   .home-fabu>ul>li:last-child{
      margin-right: 0rpx;

   }
/* 发布模块结束 */
/* 最新动态模块 */
   .home-zuixin{
     background: #fff;
     margin-top: 10rpx;
     padding-left: 31rpx;
   }
   .home-zuixin>div:nth-child(1){
     height:80rpx;
      font-size:32rpx;
      font-weight:bold;
      color:rgba(51,51,51,1);
      line-height: 80rpx;
      border-bottom: 1px solid #eee;
   }
   .home-zuixin-con>div>ul:nth-child(1){
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   .home-zuixin-con>div>ul:nth-child(1)>li:nth-child(1) img{
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
   }
   .home-zuixin-con>div>ul:nth-child(1)>li:nth-child(2) img{
     width:101rpx;
     height: 43rpx;
   }
   .home-zuixin-con>div{
     margin-right: 28rpx;
     padding-bottom: 30rpx;
     border-bottom: 1px solid #eee;
   }
   .home-zuixin-con>div>ul{
      margin-top: 40rpx;
      width: 100%;
   }
   .home-zuixin-con>div>ul:nth-child(1)>li:nth-child(1){
     display: flex;
     align-items: center;
   }
   .home-zuixin-con>div>ul:nth-child(1)>li:nth-child(1) div{
     font-size:30rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(0,0,0,1);
    margin-left: 20rpx;
    margin-top: -5rpx;
   }
   .home-zuixin-con>div>ul:nth-child(1)>li:nth-child(2){
     float: right;
     text-align: right;
   }
   .home-zuixin-con>div>div:nth-child(2){
      font-size:28rpx;
      font-family:PingFang SC;
      font-weight:bold;
      color:rgba(153,153,153,1);
      margin-left: 84rpx;
      margin-right: 30rpx;
      margin-top: 30rpx;
   }
   .home-zuixin-con>div>div:nth-child(2)>div:nth-child(2) img{
       height: 221rpx;
       width: 221rpx;
       margin-right: 10rpx;
       border-radius: 5rpx;
   }
   .home-zuixin-con>div>div:nth-child(2)>div:nth-child(2){
     margin-top: 20rpx;
   }
   .home-zuixin-con>div>ul:nth-child(3)>li>img{
     width: 35rpx;
     height: 35rpx;
     margin-right: 6rpx;
   }
   .home-zuixin-con>div>ul:nth-child(3)>li{
     font-size:24rpx;
      font-weight:bold;
      color:rgba(153,153,153,1);
      margin-right: 15rpx;
   }
   .home-zuixin-con>div>ul:nth-child(3)>li:last-child{
       margin-right: 0;
   }
   .home-zuixin-con>div>ul:nth-child(3){
     display: flex;
     align-items: center;
     justify-content:flex-end;
   }
   .home-zuixin-con>div>div:nth-child(4){
     background:rgba(238,238,238,1);
     border-radius:10rpx;
     padding:0 28rpx;
     margin-top: 50rpx;
     padding:28rpx;
   }
   .home-zuixin-contwo>ul:nth-child(1){
      display: flex;
      align-items: center;
   }
   .home-zuixin-contwo>ul:nth-child(1)>li:nth-child(1){
     display: flex;
     align-items: center;
     margin-right: 20rpx;
   }
   .home-zuixin-contwo>ul:nth-child(1)>li:nth-child(1) img{
        width: 49rpx;
        height: 49rpx;
        border-radius: 50%;
        margin-right: 15rpx;
   }
   .home-zuixin-contwo>ul:nth-child(1)>li:nth-child(1) div{
      font-size:26rpx;
      font-weight:bold;
      color:rgba(34,151,212,1);
  }
   .home-zuixin-contwo>ul:nth-child(1)>li:nth-child(2){
      font-size:22rpx;
      font-family:PingFang SC;
      font-weight:bold;
      color:rgba(153,153,153,1);
   }
   .home-zuixin-contwo>div:nth-child(2){
     font-size:26rpx;
      font-weight:bold;
      color:rgba(102,102,102,1);
      margin-top: 28rpx;
      margin-left: 70rpx;
      margin-right: 30rpx;
      margin-bottom: 28rpx;
   }
   .home-zuixin-contwo>ul:nth-child(3){
      font-size:24rpx;
      font-weight:bold;
      color:rgba(153,153,153,1);
      display: flex;
      justify-content:flex-end;
      align-items:center;
   }
   .home-zuixin-contwo>ul:nth-child(3)>li>img{
     width: 24rpx;
     height: 26rpx;
     margin-right: 5rpx;
   }
   .home-zuixin-contwo>ul:nth-child(3)>li{
     margin-right: 10rpx;
   }
   .home-zuixin-contwo>ul:nth-child(3)>li:last-child{
     margin-right: 0;
   }
   .home-zuixin-contwo{
      padding: 30rpx 0;
      border-bottom: 1px solid #D3D3D3;
   }
/* 最新动态模块结束 */
/* 老师或机构入驻模块 */
   .home-ruzhu{
     background: #fff;
     padding:0 30rpx;
     position: relative;
   }
   .home-ruzhu>div:nth-child(1){
     font-size:32rpx;
     font-weight:bold;
     color:rgba(51,51,51,1);
     height: 80rpx;
     line-height: 80rpx;
   }
   .home-ruzhu-die{
      width: 317rpx;
     height: 362rpx;
     box-sizing: border-box;
      padding:15rpx 20rpx;
      position: relative;
      border-radius: 20rpx;
      transition: all 0.5s;
   }
   .home-ruzhu>div:nth-child(2){
     margin-top: 50rpx;
     padding-bottom: 80rpx;
   }
   .home-ruzhu-die>div>div>img{
     width: 108rpx;
     height: 108rpx;
   }
   .home-ruzhu-die>div>div>div{
     font-size:22rpx;
      font-weight:bold;
      color:rgba(34,151,212,1);
      margin-top: -18rpx;
   }
   .home-ruzhu-die>div:nth-child(2){
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
     height: 256rpx;
     align-items: center;
   }
   .home-ruzhu-die>div>div{
     width: 40%;
     text-align: center;
   }
   .home-ruzhu-die>div:nth-child(3){
     font-size:24rpx;
      font-weight:bold;
      color:rgba(255,255,255,1);
      line-height:36px;
      width:258rpx;
      height:48rpx;
      line-height: 48rpx;
      text-align: center;
      background:rgba(34,151,212,1);
      border-radius:24px;
      margin: 0 auto;
      margin-top: 10rpx;
      margin-top: 25rpx;
      transition: all 0.5s;
   }
   .swiper-wrapper-div{
      display: flex;
      align-items: center;
      height: 562rpx;
      justify-content: space-between;
   }
   .home-ruzhu-die>div:nth-child(4){
      width: 100%;
      height: 100%;
      position: absolute;
      background: rgba(0,0,0,0.3);
      left: 0;
      top: 0;
       border-radius: 20rpx;
   }
   .homeRuzhuLunboClass{
     position: absolute;
     left:29%;
     top:17%;
     transform: scale(1.2) ;
     z-index: 2222222;
     box-shadow: #333 0rpx 0rpx 20rpx;
   }
   .swiper-slide{
     display: inline-block;
     flex:none;
     margin-right: 30rpx;
   }
   .home-ruzhu-die>div:nth-child(1){
     position:absolute;
     left: 0%;
     top:-15%;
     margin-bottom: -20rpx;
     width: 100%;
     text-align: center;
     font-size:26rpx;
    font-weight:bold;
    color:rgba(34,151,212,1);
   }
/* 老师或机构入驻模块结束 */
/* 愿景和目标模块 */
   .home-hope{
      padding:0rpx 30rpx;
     box-sizing: border-box;
     margin-top: 10rpx;
     background: #fff;
     height: 282rpx;
     margin-bottom: 10rpx;
   }
   .home-hope>div:nth-child(1){
      font-size:32rpx;
      font-family:PingFang SC;
      height: 80rpx;
      line-height: 80rpx;
      font-weight:bold;
      color:rgba(51,51,51,1);
   }
   .home-hope-divone{
     display: inline-block;
     width: 293rpx;
     height: 162rpx;
     border-radius: 10rpx;
     margin-right: 10rpx;
   }
   .home-hope-divotwo{
     box-sizing: border-box;
     background: rgba(0,0,0,0.5);
      width: 293rpx;
     height: 162rpx;
     font-size:24rpx;
     font-family:PingFang SC;
     font-weight:400;
     color:rgba(255,255,255,1);
     border-radius: 10rpx;
     display: inline-block;
     padding:20rpx;
     white-space: normal;
   }
   .home-hope>div:nth-child(2)>.scroll{
     display: flex;
   }
   .home-hope-divotwo{
     float: right;
   }
   .home-hope-divotwo:after{
     clear: both;
     display: block;
     content: "";
   }
/* 愿景和目标模块结束 */
/* nav模块 */
  .home-nav{
    width: 100%;
    height: 428rpx;
    padding-top: 35rpx;
    box-sizing: border-box;
    margin-bottom: 10rpx;
  }
  .home-nav>ul:nth-child(1){
    display: flex;
    justify-content: space-between;

    margin-left: 21rpx;
  }
  .home-nav>ul:nth-child(1)>li:nth-child(1)>img{
    width: 173rpx;
    height: 79rpx;
  }
  .home-nav>ul:nth-child(1)>li:nth-child(2)>div img{
    width:108rpx;
    height: 74rpx;
  }
  .home-nav>ul:nth-child(1)>li:nth-child(2)>a{
      font-size:20rpx;
      font-weight:bold;
      color:rgba(255,255,255,0.7);
      width: 156rpx;
      height: 75rpx;
      text-align: center;
      line-height: 75rpx;
      margin-left: 10rpx;
  }
  .home-nav>ul:nth-child(1)>li:nth-child(2){
    display: flex;
    margin-right: 10rpx;
  }
  .home-nav>div:nth-child(2)>div{
      font-size:40rpx;
      font-weight:bold;
      color:rgba(255,255,255,1);
      width:656rpx;
      height:38rpx;
      line-height: 38rpx;
      margin: 0 auto;
  }
  .home-nav>div:nth-child(2){
      width: 100%;
      margin-top: 40rpx;
  }
  .home-nav>ul:nth-child(3){
    display: flex;
  }
  .home-nav>ul:nth-child(3) li{
      font-size:20rpx;
      font-weight:400;
      color:rgba(255,255,255,1);
      text-align: center;
  }
  .home-nav>ul:nth-child(3) li:nth-child(1){
    width: 176rpx;
    height: 67rpx;
    padding-top: 20rpx;
  }
  .home-nav>ul:nth-child(3) li:nth-child(2){
      width:163rpx;
      height: 41rpx;
      line-height: 41rpx;
      margin-top: 14rpx;
      margin-left: 5rpx;
  }
  .home-nav>ul:nth-child(3){
      width: 340rpx;
      margin: 0 auto;
      margin-top: 40rpx;
  }
  .home-nav>div:nth-child(4){
      width: 690rpx;
      height: 80rpx;
      background: #fff;
      border-radius: 40rpx;
      margin: 0 auto;
      display: flex;
      align-items: center;
      margin-top: -15rpx;
  }
  .home-nav>div:nth-child(4) input{
    width: 530rpx;
    margin: 0 auto;
    color:#fff;
  }
  .placeholder{
    color: #fff;
  }
/* nav模块结束 */
/* 根div */
   .home-die{
     background: #eee;
     height: 100%;
   }
/* 根结束 */
</style>
